<template>
  <div
    class="data-box"
    :class="[props.disabled ? 'disabled' : '', props.canHover ? 'can-hover' : '']"
    @click="handleClick"
  >
    <div class="data-box-value g-ell">{{ props.value || 0 }}</div>
    <div class="data-box-label g-ell">
      <slot name="label">{{ props.label }}</slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, withDefaults, computed } from 'vue';

interface DataBoxProps {
  label: string;
  value: any;
  disabled?: boolean;
  canHover?: boolean;
  shadowColor?: string;
}
const props = withDefaults(defineProps<DataBoxProps>(), {
  disabled: false,
  canHover: false,
  shadowColor: 'rgba(67, 89, 112, 0.1)'
});
const emits = defineEmits(['box-click']);

const localShadow = computed(() => {
  return `0px 4px 8px 0px ${props.shadowColor}`;
});

function handleClick() {
  if (!props.canHover) return;
  emits('box-click');
}
</script>
<style lang="scss" scoped>
.data-box {
  margin-right: 12px;
  margin-bottom: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: calc((100% - 24px) / 3);
  height: 72px;
  border-radius: 8px;
  border: 1px solid #f2f3f5;
  // background: linear-gradient(to bottom, #035e47 0%, #03ac82 100%), linear-gradient(to right bottom, #03ac82 0%, transparent 100%);
  .data-box-value {
    width: 100%;
    font-size: 22px;
    font-family: D-DIN-Bold, D-DIN;
    font-weight: bold;
    color: #0a1f33;
    line-height: 30px;
  }
  .data-box-label {
    width: 100%;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }

  &:nth-child(3n) {
    margin-right: 0;
  }
  &:nth-child(n + 3) {
    margin-bottom: 0;
  }

  &.disabled {
    .data-box-value {
      color: #96a7b3;
    }
    .data-box-label {
      color: #96a7b3;
    }
  }
  &.can-hover {
    cursor: pointer;
    transition: box-shadow 0.2s;
    &:hover {
      background: #fff;
      box-shadow: v-bind(localShadow);
    }
  }
}
</style>
